<template>
	<view style="background-color: #fff;height: 100%;">
		<view class="type_area">
			<!-- <view class="dispAI dispJC" style="padding-top: 30rpx;" @click="handleFeedList">
				<view class="" style="font-size: 28rpx;color: #000;">反馈记录</view>
				<view class="">
					<image src="@/static/image/right.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				</view>
			</view> -->

			<!-- <view class="box_xian"></view> -->

			<view class="" style="font-size: 28rpx;color: #000;padding-top: 30rpx;">反馈类型</view>

			<view class="dispAI dispJC" style="margin-top: 30rpx;">
				<view class="dispAI">
					<view class="" style="margin-right: 20rpx;" @click="xuan='闪退'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='闪退'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">闪退</view>
				</view>

				<view class="dispAI">
					<view class="" style="margin-right: 20rpx;" @click="xuan='卡顿'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='卡顿'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">卡顿</view>
				</view>

				<view class="dispAI">
					<view class="" style="margin-right: 20rpx;" @click="xuan='黑屏'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='黑屏'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">黑屏</view>
				</view>

				<view class="dispAI">
					<view class="" style="margin-right: 20rpx;" @click="xuan='功能问题'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='功能问题'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">功能问题</view>
				</view>
			</view>



			<view class="dispAI" style="margin-top: 30rpx;">
				<view class="dispAI" style="margin-right: 65rpx;">
					<view class="" style="margin-right: 20rpx;" @click="xuan='建议'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='建议'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">建议</view>
				</view>

				<view class="dispAI">
					<view class="" style="margin-right: 20rpx;" @click="xuan='其他'">

						<image src="@/static/image/a1.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-if="xuan=='其他'">
						</image>

						<image src="@/static/image/a2.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;" mode=""
							v-else>
						</image>
					</view>
					<view class="" style="font-size: 28rpx;color: #000;">其他</view>
				</view>
			</view>


			<u--textarea v-model="value1" placeholder="请输入您的反馈意见" count maxlength="200" confirmType="done" border="none"
				autoHeight></u--textarea>



			<view class="" style="font-size: 28rpx;color: #000;padding-top: 30rpx;">上传截图</view>

			<view class="MT_30" style="display: flex;">
				<view class="" v-for="(item,index) in portrait" :key="index" style="position: relative;">
					<image :src="item" mode="aspectFit"
						style="width: 214rpx;height: 214rpx;margin-right: 20rpx;display: flex;"></image>
					<view class="" style="position: absolute;top: 10rpx; left: 155rpx;color: red;width: 100rpx;"
						@click="shanchuImg(index,1)"><u-icon name="close" color="red"></u-icon>
					</view>
				</view>
				<image v-if="portrait.length==3?false:true" src="@/static/image/upload.png"
					style="width: 214rpx;height: 214rpx;" @click="modufyimage()" mode=""></image>
			</view>

		</view>
		<view class="box_dibu">
			<view class="box_btn" @click="handleSubmit">提交</view>
		</view>

	</view>
</template>

<script>
	import {
		uploadImg,
		feedback
	} from "@/api/api.js"
	export default {
		data() {
			return {
				xuan: '闪退',
				value1: '',
				portrait: [],
				describe: "", //描述
			}
		},
		methods: {

			// 获取用户相册
			modufyimage(e) {
				const that = this
				uni.chooseImage({
					count: 3, // 最多可以选择的图片张数，默认9/这里可以限制照片数量
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						uni.showToast({
							title: '上传中..',
							icon: "loading",
							duration: 2000
						});
						console.log(res)
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							// const len = that.imageList.length
							uni.uploadFile({
								url: uploadImg, //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[i],
								name: 'file', //这里注意修改成后端需要的字段
								formData: {},
								// header: {
								// 	"Content-Type": "application/form-data",
								// 	"Authorization": 'Bearer' + ' ' + that.token
								// },
								success: (uploadFileRes) => {
									let a = JSON.parse(uploadFileRes.data)
									that.portrait.push(a.data)
									uni.showToast({
										title: '上传成功！',
										icon: "none",
										duration: 1000
									});
								},
								fail: (e) => {
									console.log("网络请求fail");
								},
							});
						}
					}
				})
			},

			// 删除图片
			shanchuImg(e, i) {
				if (i == 1) {
					this.portrait.splice(e, 1);
				}
			},


			async handleSubmit() {
				let data = {
					describe: this.value1,
					imgs: this.portrait.join(','),
					type: this.xuan
				}
				let res = await feedback(data)
				if (res.code == 1000) {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
					this.value1 = ""
					this.portrait = []
					this.xuan = '闪退'
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
				// console.log("333", data)
			},

			handleFeedList() {
				uni.navigateTo({
					url: "./feedList"
				})
			},
		}
	}
</script>

<style scoped>
	.box_btn {
		width: 670rpx;
		height: 80rpx;
		background: #439B05;
		border-radius: 60rpx;
		margin: 0 auto;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 80rpx;
	}

	.box_dibu {
		position: fixed;
		bottom: 50rpx;
		width: 750rpx;
	}

	::v-deep .u-textarea__count {
		background-color: #f3f3f3 !important;
	}

	::v-deep .u-textarea__field {
		font-size: 28rpx;
		color: #999999 !important;
	}


	::v-deep .uni-textarea-textarea {
		width: 645rpx;
		height: 360rpx;
		background: #f3f3f3;
	}

	::v-deep .u-textarea {
		width: 645rpx;
		height: 360rpx;
		background: #f3f3f3;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.box_top2 {
		width: 690rpx;
		height: 360rpx;
		background: #333333;
		border-radius: 30rpx;
		opacity: 0.039;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.box_xian {
		width: 670rpx;
		height: 0rpx;
		border: 1rpx solid #EAEAEA;
		margin: 0 auto;
		margin-top: 30rpx;
	}
</style>